<template>
  <div v-if="isDiv">
    <div class="pdfContainer" v-if="pdfUrl">
      <div class="button">
        <!-- <el-button type="success" @click="prev()">上一页</el-button>
        <el-button type="success" @click="next()">下一页</el-button> -->
        <el-button type="success" @click="scaleD()">放大</el-button>
        <el-button type="success" @click="scaleX()">缩小</el-button>
        <el-button type="success" @click="clockwise()">顺时针</el-button>
        <el-button type="success" @click="antiClockwise()">逆时针</el-button>
      </div>

      <div class="pdf">
        <pdf ref="pdf" v-for="i in numPages" :key="i" :page="i" :src="pdfUrl" :rotate="pageRotate" @num-pages="pageCount = $event"
          @page-loaded="currentPage = $event" @loaded="loadPdfHandler"></pdf>
      </div>

      <div class="page"> <span class="pageNum">{{ currentPage }}</span>
        <span class="pageNum">/</span>
        <span class="pageNum">{{ pageCount }}</span>
      </div>
    </div>
    <pre v-html="textUrl" v-else></pre>
  </div>
</template>

<script>
  import Pdf from "vue-pdf"
  export default {
    components: {Pdf},
    data() {
      return {
        isDiv:false,
        numPages:"",
        pdfUrl:"",
        currentPage: 0, // pdf文件页码
        pageCount: 0, // pdf文件总页数
        scale: 100,  //  开始的时候默认和容器一样大即宽高都是100%
        pageRotate: 0,  // 旋转角度
        textUrl:""
      };
    },

    created(){
      let pdfUrl = this.$route.query.url;
      this.textUrl = this.$route.query.text;
      if(pdfUrl){
        this.pdfUrl = Pdf.createLoadingTask(pdfUrl);
      }
      else if(this.textUrl){
        this.isDiv = true;
      }
    },

    mounted() {
      if(this.pdfUrl){
        this.pdfUrl.promise.then(pdf => {
          this.numPages = pdf.numPages;
          this.isDiv = true;
        });
      }
    },

    methods: {
      // pdf加载时
      loadPdfHandler(e) {
        this.currentPage = 1; // 加载的时候先加载第一页
        if(this.$refs.pdf && this.$refs.pdf.length){
          this.$refs.pdf.forEach(item=>{
            item.$el.style.width = parseInt(this.scale) + "%";
            item.$el.style.height = parseInt(this.scale) + "%";
          })
        }else{
          this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";
          this.$refs.pdf.$el.style.height = parseInt(this.scale) + "%";
        }
      },

      //放大
      scaleD() {
        if(this.scale == 100) return this.$message.warning({
          duration:1000,
          message:'已经是最大喽~~',
          offset:"60"
        })
        this.scale += 10;
        if(this.$refs.pdf && this.$refs.pdf.length){
          this.$refs.pdf.forEach(item=>{
            item.$el.style.width = parseInt(this.scale) + "%";
          })
        }else{
          this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";
        }
      },

      //缩小
      scaleX() {
        if(this.scale == 40) return this.$message.warning({
          duration:1000,
          message:'已经是最小喽~~',
          offset:"60"
        })
        this.scale += -10;
        if(this.$refs.pdf && this.$refs.pdf.length){
          this.$refs.pdf.forEach(item=>{
            item.$el.style.width = parseInt(this.scale) + "%";
          })
        }else{
          this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";
        }
      },

      //  上一页
      prev() {
        if (this.currentPage > 1) {
          this.currentPage--;
        }
      },
      // 下一页
      next() {
        if (this.currentPage < this.pageCount) {
          this.currentPage++;
        }
      },

      // 顺时针
      clockwise() {
        this.pageRotate += 90;
      },
      // 逆时针
      antiClockwise() {
        this.pageRotate -= 90;
      }
    }
  };
</script>

<style scoped lang="scss">
  .global {
    width: 100%;
    height: 100%;
  }
  .preview {
    width: 100%;
    height: 50px;
  }

  .pdfContainer {
    width: 100%;
    min-height: 100vh;
    background: rgba(0,0,0,0.4);
    padding-top: 20px;
  }
  .pdfContainer .button {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
  }
  .pdfContainer .pdf {
    width: 70%;
    margin: 0 auto;
  }
  .pdfContainer .pdf span{
    margin: 0 auto;
    margin-bottom: 30px;
  }
  .pdfContainer .page {
    width: 100%;
    height: 50px;
    text-align: center;
    margin-top: 20px;
    font-size: 28px;
    color: #fff;
  }
  pre{
    margin: 0;
    padding-top: 20px;
    padding-left: 10px;
    font-size: 14px;
  }
</style>
